<template>
  <div class="index-container">
    <div class="main-header">
      <el-row>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-button
            type="primary"
            icon="el-icon-plus"
            class="sureBtn"
            size="medium"
            @click="handleAdd"
          >
            登记
          </el-button>
          <el-button
            type="success"
            icon="el-icon-search"
            class="sureBtn"
            size="medium"
            @click="handleCheck"
          >
            编辑/查看
          </el-button>
          <el-button
            type="danger"
            class="setBtn"
            icon="el-icon-delete"
            size="medium"
            @click="handleSelectDelete"
          >
            删 除
          </el-button>
        </el-col>
        <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
          <div class="search">
            <el-row :gutter="20">
              <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                <el-button
                  size="medium"
                  type="primary"
                  icon="el-icon-search"
                  class="fr"
                  @click="handleSearch"
                >
                  搜索
                </el-button>
              </el-col>
              <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                <el-input
                  v-model="selectForm.id_card"
                  size="medium"
                  placeholder="身份证"
                ></el-input>
              </el-col>
              <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                <el-input
                  v-model="selectForm.mobile"
                  size="medium"
                  placeholder="联系方式"
                ></el-input>
              </el-col>
              <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                <el-input
                  v-model="selectForm.name"
                  size="medium"
                  placeholder="老人姓名"
                ></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-content">
      <app-table
        :page-data="pageData"
        :table-columns="tableColumns"
        @current-change="handleCurrentChange"
        @handleCheckedRows="handleCheckedRows"
        @changeForMal="changeForMal"
        @cancelOrder="cancelOrder"
      ></app-table>
    </div>
    <el-dialog
      :title="formData.name"
      :visible.sync="dialogVisible"
      width="75%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <div class="table-do">
          <el-row>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-button
                type="primary"
                icon="el-icon-plus"
                class="sureBtn"
                size="mini"
                :data-id="formData.id"
                @click="handleAddForm"
              >
                新增
              </el-button>
            </el-col>
          </el-row>
        </div>
        <el-table
          :data="pageData2.list"
          stripe
          :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
        >
          <el-table-column
            v-for="(item, index) in tableColumns2"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="item.formatter"
            :filters="item.filters"
            :class-name="item.className"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                @click="handleEdit(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page="pageData2.page"
          layout="total, prev, pager, next, jumper"
          :total="pageData2.total"
          :page-size="pageData2.page_size"
          @current-change="handleCurrentChange2"
        ></el-pagination>
      </div>
    </el-dialog>
    <el-dialog
      width="30%"
      title="新增病历"
      :visible.sync="innerVisibleForm"
      :before-close="closeVisibleForm"
      append-to-body
    >
      <el-form
        ref="hsForm"
        :model="hsForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
        size="medium"
      >
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="科室" prop="office">
              <el-select
                v-model="hsForm.office"
                clearable
                placeholder="请选择科室"
                filterable
                style="width: 100%"
              >
                <el-option :key="0" label="内科" :value="'1'"></el-option>
                <el-option :key="1" label="外科" :value="'2'"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="症状描述" prop="content">
              <el-input
                v-model="hsForm.content"
                :rows="5"
                type="textarea"
                placeholder="请输入症状描述"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="药方" prop="prescription">
              <el-input
                v-model="hsForm.prescription"
                :rows="5"
                type="textarea"
                placeholder="请输入药方"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="诊断结果" prop="result">
              <el-input
                v-model="hsForm.result"
                :rows="5"
                type="textarea"
                placeholder="请输入诊断结果"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="诊断时间" prop="time">
              <el-date-picker
                v-model="hsForm.time"
                value-format="yyyy-MM-dd"
                format="yyyy 年 MM 月 dd 日"
                placeholder="选择日期时间"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="责任医生" prop="doctor">
              <el-input v-model="hsForm.doctor"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="form-footer">
        <el-button type="primary" class="sureBtn" size="mini" @click="saveForm">
          提 交
        </el-button>
        <el-button
          type="info"
          class="setBtn"
          size="mini"
          @click="cancel('hsForm')"
        >
          取 消
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="疾病治疗登记"
      :visible.sync="dialogVisibleForm"
      width="90%"
      :before-close="closeDialogForm"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <common-form
          :key="key"
          :gutter="30"
          :baseid="baseid"
          :datas="diseFormData"
          @handleMap="handleMap"
          @save="save"
          @healthSave="healthSave"
        ></common-form>
      </div>
    </el-dialog>
    <!-- 地图 -->
    <el-dialog
      title="选择地址"
      :visible.sync="mapVisible"
      width="60%"
      :before-close="closeMap"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <app-map
          :key="key2"
          ref="map"
          :keyword="keyword"
          @result="result"
        ></app-map>
      </div>
    </el-dialog>
    <!-- 地图end -->
  </div>
</template>
<script>
  import appTable from "@/components/AppTable/index";
  import { yitrainelder, yitraincase, yitrainhealth } from "@/api/oldermanager";
  import appMap from "@/components/AppMap/index";
  import commonForm from "./components/form";
  export default {
    name: "Index",
    components: { appTable, appMap, commonForm },
    data() {
      return {
        e_id: "",
        key: Math.random(),
        dialogVisible: false,
        innerVisibleForm: false,
        hsForm: {},
        formData: {},
        rules: {
          office: [{ required: true, message: "选择科室", trigger: "change" }],
          doctor: [
            { required: true, message: "填写责任医生", trigger: "blur" },
          ],
          time: [
            { required: true, message: "选择诊断时间", trigger: "change" },
          ],
        },
        currentSelectedData: [],
        pageData: {},
        pageData2: {},
        selectForm: {},
        tableColumns: [
          { prop: "name", label: "姓名" },
          { prop: "age", label: "年龄" },
          { prop: "sex", label: "性别", formatter: this.genderFormatter },
          { prop: "mobile", label: "联系方式" },
          { prop: "id_card", label: "身份证" },
          // { prop: "floor_str", label: "床位号" },
          // {
          //   prop: "status",
          //   label: "入住状态",
          //   formatter: this.statusFormatter,
          // },
          { prop: "create_time", label: "入住时间" },
        ],
        tableColumns2: [
          { prop: "office	", label: "科室", formatter: this.typeFormatter },
          { prop: "content", label: "病症" },
          { prop: "prescription", label: "药方" },
          { prop: "result", label: "诊断结果" },
          { prop: "doctor", label: "责任医生" },
          { prop: "time", label: "诊断时间" },
        ],
        // 疾病治疗登记
        dialogVisibleForm: false,
        baseid: "",
        diseFormData: {
          base: {},
        },
        mapVisible: false,
        key2: Math.random(),
        keyword: "",
        base: {},
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getTableData();
    },
    methods: {
      handleMap(keyword) {
        this.key2 = Math.random();
        this.mapVisible = true;
        if (keyword) this.keyword = keyword;
      },
      closeMap() {
        this.mapVisible = false;
      },
      result(e) {
        this.mapVisible = false;
        this.$set(this.base, "lng", e.lng);
        this.$set(this.base, "lat", e.lat);
        this.$set(this.base, "address", e.address);
        this.$set(this.diseFormData, "base", this.base);
      },
      handleSearch(){
        this.getTableData(this.selectForm);
      },
      statusFormatter(row, column) {
        if (row.status == -1) {
          return "已离院";
        } else if(row.status == 1){
          return "正常";
        }
      },
      genderFormatter(row, column) {
        if (row.sex == 1) {
          return "男";
        } else if (row.sex == 2) {
          return "女";
        }
      },
      typeFormatter(row, column) {
        if (row.office == 1) {
          return "内科";
        } else if (row.office == 2) {
          return "外科";
        }
      },
      saveForm() {
        this.$set(this.hsForm, "e_id", this.e_id);
        this.$refs["hsForm"].validate(async (valid) => {
          if (valid) {
            if (this.hsForm.id) {
              yitraincase("put", this.hsForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                  this.cancel("hsForm");
                  let param = {
                    e_id: this.e_id,
                  };
                  this.getDiseaseData(param);
                }
              });
            } else {
              yitraincase("post", this.hsForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  this.cancel("hsForm");
                  let param = {
                    e_id: this.e_id,
                  };
                  this.getDiseaseData(param);
                }
              });
            }
          }
        });
      },
      getTableData(data) {
        yitrainelder("get", data).then((resp) => {
          if (resp.code === 200) {
            this.pageData = resp.data;
            this.$set(this.pageData, "type", 6);
          }
        });
      },
      getDiseaseData(data) {
        yitraincase("get", data).then((resp) => {
          if (resp.code === 200) {
            this.pageData2 = resp.data;
            this.$set(this.pageData2, "type", 4);
          }
        });
      },
      handleAdd() {
        this.dialogVisibleForm = true;
        this.key = Math.random();
        this.diseFormData = { base: {} };
      },
      closeDialogForm() {
        this.dialogVisibleForm = false;
      },
      handleCheck() {
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请选择一条您要查看的内容",
            type: "warning",
          });
        } else if (this.currentSelectedData.length > 1) {
          this.$message({
            message: "一次只能查看一条内容",
            type: "warning",
          });
        } else {
          let params = {
            id: this.currentSelectedData[0].id,
          };
          yitrainelder("get", params).then((resp) => {
            if (resp.code === 200) {
              this.diseFormData = resp.data;
              this.base = resp.data.base;
              this.dialogVisibleForm = true;
              this.key = Math.random();
              this.baseid = resp.data?.base?.id + "";
            }
          });
        }
      },
      handleCheckedRows(rows) {
        if (rows && rows instanceof Array && rows.length > 0) {
          this.currentSelectedData = rows;
        } else {
          this.currentSelectedData = [];
        }
      },
      handleCurrentChange(val) {
        let param = {
          page: val,
        };
        this.getTableData(param);
      },
      handleCurrentChange2(val) {
        let param = {
          page: val,
          e_id: this.e_id,
        };
        this.getDiseaseData(param);
      },
      cancelOrder({rows}) {
        this.$confirm("确定删除该条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            yitrainelder("delete", {id: rows[0].id}).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getTableData(this.selectForm);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消操作",
            });
          });
      },
      changeForMal(rows) {
        this.dialogVisible = true;
        this.formData = rows.rows[0];
        this.e_id = rows.rows[0].id;
        let params = {
          e_id: rows.rows[0].id,
        };
        this.getDiseaseData(params);
      },
      closeDialog() {
        this.dialogVisible = false;
      },
      handleAddForm() {
        this.innerVisibleForm = true;
      },
      handleEdit(row) {
        this.innerVisibleForm = true;
        this.hsForm = Object.assign({}, row);
      },
      handleSelectDelete() {
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请选择一条您要删除的内容",
            type: "warning",
          });
        } else if (this.currentSelectedData.length > 1) {
          this.$message({
            message: "一次只能删除一条内容",
            type: "warning",
          });
        } else {
          this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.formData = Object.assign({}, this.currentSelectedData[0]);
              let param = {
                id: this.formData.id,
              };
              yitrainelder("delete", param).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.getTableData();
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        }
      },
      handleDelete(id) {
        this.$confirm("确定删除该条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let param = {
              id: id,
            };
            yitraincase("delete", param).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                let params = {
                  e_id: this.e_id,
                };
                this.getDiseaseData(params);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消操作",
            });
          });
      },
      closeVisibleForm() {
        this.innerVisibleForm = false;
        this.$refs["hsForm"].resetFields();
        this["hsForm"] = {};
      },
      cancel(formName) {
        this.innerVisibleForm = false;
        this.$refs[formName].resetFields();
        this[formName] = {};
      },

      //疾病治疗基本信息登记
      save(data) {
        if (data.id) {
          yitrainelder("put", data).then((resp) => {
            if (resp.code === 200) {
              this.$message({
                type: "success",
                message: "修改成功",
              });
              this.getTableData();
              if (resp.data) this.baseid = resp.data.e_id + "";
            } else {
              this.$message({
                type: "error",
                message: resp.msg,
              });
            }
          });
        } else {
          yitrainelder("post", data).then((resp) => {
            if (resp.code === 200) {
              this.$message({
                type: "success",
                message: "添加成功",
              });
              this.getTableData();
              if (resp.data) this.baseid = resp.data.e_id + "";
            } else {
              this.$message({
                type: "error",
                message: resp.msg,
              });
            }
          });
        }
        
      },
      //疾病治疗健康信息登记
      healthSave(data) {
        if (data.id) {
          yitrainhealth("put", data).then((resp) => {
            if (resp.code === 200) {
              this.$message({
                type: "success",
                message: "修改成功",
              });
              this.getDiseaseData({e_id: data.e_id});
            } else {
              this.$message({
                type: "error",
                message: resp.msg,
              });
            }
          });
        } else {
          yitrainhealth("post", data).then((resp) => {
            if (resp.code === 200) {
              this.$message({
                type: "success",
                message: "添加成功",
              });
              this.getDiseaseData({e_id: data.e_id});
            } else {
              this.$message({
                type: "error",
                message: resp.msg,
              });
            }
          });
        }
      },
      cancelDise() {
        this.dialogVisibleForm = false;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      .search {
        width: 100%;

        ::v-deep {
          .el-col {
            float: right;
          }
        }

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }
    }
  }

  .el-table {
    ::v-deep {
      th {
        .cell {
          color: #fff;
        }
      }
    }
  }

  .dialog-main {
    .table-do {
      margin-bottom: 15px;
    }

    ::v-deep {
      th {
        .cell {
          color: #fff;
        }
      }
    }
  }
</style>
